<template>
  <div class="home">
    <!-- <HomeTool /> -->
    <div id="map">
      <div id="topbar" ref="topbar">
      </div>
    </div>
  </div>
</template>


<script>
import { loadCss, setDefaultOptions, loadModules } from "esri-loader";
import { computed, onMounted, reactive } from "vue";
export default {
  setup() {
    onMounted(() => {
      InitMap()
    })
    const InitMap  = () => {
      const publicPath = 'https://js.arcgis.com/'
      loadCss()
      setDefaultOptions({ css: true })
      const options = {
        url: `${publicPath}4.17/init.js`,
        css: `${publicPath}4.17/esri/themes/dark-blue/main.css`
      }
      loadModules([
        "esri/Map",
        "esri/layers/WebTileLayer",
        "esri/layers/WMSLayer",
        'esri/views/MapView',
        "esri/kernel",
        "esri/geometry/SpatialReference"
        ], options)
          .then(async ([Map, WebTileLayer, WMSLayer, MapView, EsriNS, SpatialReference]) => {
            const version = EsriNS.version
            console.log(SpatialReference, 'SpatialReference')
            let map = new Map({
              basemap: "arcgis-topographic",
              spatialReference: {
                wkid: 4214
              },
            })
            console.log(map)
            let view = new MapView({
              map: map,
              container: 'map',
              center: [116.394568, 39.905969],
              zoom: 5,
              // 4214 GCS_Beijing_1954 
            })
            const webLayer = new WebTileLayer({
              urlTemplate: 'http://a.tile.stamen.com/terrain-background/{z}/{x}/{y}.png',
              subDomains: ["a", "b", "c"]
            })
            map.add(webLayer)
            const layer = new WMSLayer({
              visible: true,
              blendMode: 'normal',
              url: "http://182.254.232.181:8080/geoserver/countvillage/wms",
              // name: 'shengjiexin_84_code',
              // name: 'country_border',
              // name: 'china_countyroad',
              // 3000  200000000
              // minScale: 60000000,
              // maxScale: 0,
              sublayers: [
                {
                  mixScale: 200000,
                  maxScale: 0,
                  name: 'countvillage:ChinaBuilding_num_500'
                },
                {
                  mixScale: 0,
                  maxScale: 500000,
                  name: 'countvillage:highway'
                },
              ],
            })
            await layer.load()
            map.add(layer)
            // const layer1 = new WMSLayer({
            //   visible: true,
            //   blendMode: 'normal',
            //   url: "http://182.254.232.181:8080/geoserver/countvillage/wms",
            //   // name: 'shengjiexin_84_code',
            //   // name: 'country_border',
            //   // name: 'china_countyroad',
            //   // 3000  200000000
            //   // minScale: 60000000,
            //   // maxScale: 0,
            //   sublayers: [{
            //     name: 'countvillage:highway'
            //   }],
            // })
            // await layer1.load()
            // this.map.add(layer1)
          })
    }
  }
}
</script>
<style lang="scss">
.home {
  width: 100%;
  height: 100%;
  position: relative;
}
#map {
  width: 100%;
  height: 100%;
}
</style>